<style type="text/css">
.topic-block {
	width: 500px;
	margin: 0 auto;
}
.color-head {
	color: #3DA639;
}
.reply {
	border: 1px solid #5BCC58;
	padding: 10px;
	margin-bottom: 10px;
}
.reply hr {
	margin: 10px auto;
}
</style>
<div class="topic-block">
	<div style="padding: 10px; border: 1px solid #F0DB11; margin-bottom: 10px;">
		<h3>
			<?php echo $params['topic']['name'];?>
		</h3>
		
		<p><strong class="color-head"><i class="icon-user"></i> <?php echo empty($params['topic']['account']['name'])? $params['topic']['account']['email']: $params['topic']['account']['name'];?></strong></p>
		<p>
			<small><i class="icon-calendar"></i><?php $time = new DateTime($params['topic']['createTime']); echo $time->format('j/m/Y');?></small>
		</p>
		<hr style="margin: 10px auto;" />
		<div>
			<p><?php echo nl2br($params['topic']['detail']);?></p>
			<p>
				<small class="status" style="margin-right: 6px;">
					สถานะ: <?php echo ($params['topic']['status']==0)? 'ปิด': 'เปิด'; ?>
				</small>
				<?php if($params['topic']['status']==1){?> <small><a class="closeQ" style="cursor: pointer;">ปิดคำถาม</a></small><?php }?>
			</p>
		</div>
	</div>
	
	<?php if(count($params['replies'])>0){?>
	<div class="replies">
		<?php foreach($params['replies'] as $key => $value){?>
		<div class="reply">
			<div>
				<p><strong  class="color-head"><i class="icon-user"></i> <?php echo empty($value['owner']['name'])? $value['owner']['email']: $value['owner']['name'];?></strong></p>
				<small><i class="icon-calendar"></i> <?php $time = new DateTime($value['createTime']); echo $time->format('j/m/Y');?></small>
			</div>
			<hr />
			<div><p><?php echo nl2br($value['detail']);?></p></div>
		</div>
		<?php }?>
	</div>
	<?php }?>
	<?php if($params['topic']['status']==1){?>
	<form method="post">
		<fieldset>
			<legend>ตอบกลับ</legend>
			<textarea rows="" cols="" class="detail" name="detail"></textarea>
			<label><button type="submit" class="btn">submit</button></label>
		</fieldset>
	</form>
	<?php }?>
</div>
<script type="text/javascript">
$(function(){
	function GetURLParameter(sParam)
	{
		var sPageURL = window.location.search.substring(1);
		var sURLVariables = sPageURL.split('&');
		var sParameterName;
		for(var i=0; i< sURLVariables.length; i++){
			sParameterName = sURLVariables[i].split('=');
			if(sParameterName[0]==sParam){
				return sParameterName[1];
			}
		}
	}
	
	var closing = false;
	function afterClose(){
		closing = false;
		$('.closeQ').button('reset');
	}
	
	$('.closeQ').click(function(){
		if(closing){ return; }
		$('.closeQ').button('loading');
		closing = true;
		$.ajax(document.URL, {
			data: { id: GetURLParameter('id'), status: 0 },
			type: 'PUT',
			dataType: 'json',
			success: function(data){
				location.reload();
			},
			error: function(){
				afterClose();
			}
		});
	});	
});
</script>